<script setup lang="ts">
import { getFile } from "@/api/search";
import { Check, Close } from "@element-plus/icons-vue";
interface Props {
  tableData: any;
  loading: any;
  renameId: any;
}
const props = withDefaults(defineProps<Props>(), {
  tableData: [],
  loading: false,
  renameId: "",
});
const emit = defineEmits([
  "isShowBtns",
  "loadMoreData",
  "click-change",
  "rename",
]);
const multipleSelection = ref([]);
const multipleTableRef = ref(null);
const lastRow: any = ref();
const rowClick = (row: any, column: any, event: any) => {
  // console.log(row, lastRow.value);
  multipleTableRef.value.toggleRowSelection(row);
  if (multipleSelection.value.length > 1) {
    multipleSelection.value.forEach((item) => {
      multipleTableRef.value.toggleRowSelection(item, false);
    });
    multipleTableRef.value.toggleRowSelection(row);
  }
};
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
  emit("click-change", [...multipleSelection.value]);
};
const handleMouseEnter = (row: any, column: any, cell: any, event: any) => {
  // console.log({ row, column, cell, event });
};
const handleMouseOut = (row: any, column: any, cell: any, event: any) => {};
watch(multipleSelection, (val: any) => {
  // console.log("val", val);
  if (val && val.length == 1) {
    emit("isShowBtns", true);
  } else {
    emit("isShowBtns", false);
  }
});
function isRed({ row }) {
  const checkIdList = multipleSelection.value?.map((item: any) => item.id);
  // console.log("row", multipleSelection.value, row.id);
  if (checkIdList?.includes(row.id)) {
    return {
      backgroundColor: "var(--el-table-current-row-bg-color)",
      // color: "red",
    };
  }
}
const headerText = computed(() => {
  return `已选中${multipleSelection.value.length}个文件/文件夹`;
});

const scrollTableDom: any = ref("");
onMounted(() => {
  scrollTableDom.value = document.querySelector(".el-table__body-wrapper");
  scrollTableDom.value.addEventListener("scroll", handleTableScroll);
});
onUnmounted(() => {
  scrollTableDom.value.removeEventListener("scroll", handleTableScroll);
});

const handleTableScroll = (event: any) => {
  const table = event.target;
  const scrollPosition =
    table.scrollHeight - table.scrollTop - table.clientHeight;
  if (scrollPosition <= 5) {
    emit("loadMoreData");
  }
};
const svg = `<svg width="160" height="160" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg" fill="#409eff" stroke-width="4px">
    <path d="M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z">
        <animateTransform
            attributeName="transform"
            type="rotate"
            from="0 67 67"
            to="-360 67 67"
            dur="16s"
            repeatCount="indefinite"/>
    </path>
</svg>`;
const distributePermissionVisible = ref(false);
const cur_obj = ref();
const preview_file = (row: any) => {
  distributePermissionVisible.value = true;
  cur_obj.value = row;
  // console.log({
  //   distributePermissionVisible: distributePermissionVisible.value,
  //   cur_obj: cur_obj.value,
  // });
};
const getClickData = () => {
  return [...multipleSelection.value];
};
defineExpose({ getClickData });
</script>

<template>
  <el-table
    ref="multipleTableRef"
    :data="tableData"
    @selection-change="handleSelectionChange"
    class="table"
    :highlight-current-row="false"
    @row-click="rowClick"
    :row-style="isRed"
    @cell-mouse-enter="handleMouseEnter"
    @cell-mouse-leave="handleMouseOut"
    v-loading="loading"
    :element-loading-svg="svg"
    element-loading-svg-view-box="0, 0, 135, 135"
  >
    <el-table-column type="selection" />
    <el-table-column label="文件名称" min-width="55%">
      <template #header>
        <span class="flie-name" v-if="multipleSelection?.length < 1"
          >文件名称</span
        >
        <span v-else>{{ headerText }}</span>
      </template>
      <template #default="scope">
        <div class="fileScope">
          <div class="fileScope-name">
            <el-image :src="scope.row.preview" fit="cover">
              <!-- <template #error> -->
              <!-- <img class="el-image" :src="scope.row.preview" alt="" /> -->
              <!-- </template>  -->
            </el-image>
            <span class="edit-name" v-if="scope.row.id == renameId">
              <el-input v-model="scope.row.EditName" @click.stop="" />
              <el-button
                type="primary"
                size="small"
                @click="emit('rename', scope.row)"
                :icon="Check"
              />
              <el-button
                type="primary"
                size="small"
                :icon="Close"
                @click="emit('click-change', [...multipleSelection])"
              />
            </span>
            <span v-else>
              <el-link
                :underline="false"
                @click.stop="preview_file(scope.row)"
                >{{ scope.row.fileName }}</el-link
              >
            </span>
          </div>
          <div class="fileScope-control"></div>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      sortable
      min-width="20%"
      property="updateTime"
      label="修改时间"
    />
    <el-table-column min-width="20%" property="fileSize" label="文件大小" />
  </el-table>
  <preview :row="cur_obj" v-model="distributePermissionVisible" />
</template>

<style lang="scss" scoped>
.table {
  width: 100%;
  height: 100%;

  --el-table-current-row-bg-color: var(--el-color-primary-light-9) !important;

  :deep(.el-table .cell) {
    padding: 0 !important;
  }
}
.control {
  display: none;
}
.fileScope {
  display: flex;
  align-items: center;
  .fileScope-name {
    display: flex;
    align-items: center;
    .el-image {
      width: px2rem(32px);
      height: px2rem(32px);
      margin-right: px2rem(12px);
    }
    .edit-name {
      display: flex;
      align-items: center;
      gap: 5px;
    }
  }
}
.flie-name {
}
</style>
